<dom-module id="pixi-grid">
  <template>
    <style>
      :host {
        overflow: hidden;
        position: relative;
      }

      #pixi-grid-canvas {
        position: absolute;
      }

      .labels {
        position: absolute;

        cursor: default;
        color: #999;
        font-size: 12px;

        pointer-events: none;
        z-index: 990;
      }

      #hlabels {
        bottom: 5px;
        left: 0;
      }

      #hlabels .label {
        position: absolute;
        /* transform: translateX(5px); */
      }

      #vlabels {
        top: 0;
        left: 5px;
        /* -webkit-writing-mode: vertical-rl; */
        /* -webkit-text-orientation: upright; */
      }

      #vlabels .label {
        position: absolute;
        /* transform: translateY(-100%) translateY(-2px); */
      }

      .debug-info {
        position: absolute;

        top: 10px;
        right: 10px;
        padding: 5px 15px;

        border: 1px solid #999;
        background: rgba( 0, 0, 0, 0.2 );

        pointer-events: none;
      }
    </style>

    <div id="view" class="fit">
      <canvas id="pixi-grid-canvas"></canvas>
      <div id="hlabels" class="labels" hidden="{{!showLabelH}}"></div>
      <div id="vlabels" class="labels" hidden="{{!showLabelH}}"></div>
      <div class="debug-info" hidden="{{!showDebugInfo}}">
        <div>X Scale: <span>{{debugInfo.xAxisScale}}</span></div>
        <div>X Offset: <span>{{debugInfo.xAxisOffset}}</span></div>
        <div>X Min Level: <span>{{debugInfo.xMinLevel}}</span></div>
        <div>X Max Level: <span>{{debugInfo.xMaxLevel}}</span></div>
        <br/>
        <div>Y Scale: <span>{{debugInfo.yAxisScale}}</span></div>
        <div>Y Offset: <span>{{debugInfo.yAxisOffset}}</span></div>
        <div>Y Min Level: <span>{{debugInfo.yMinLevel}}</span></div>
        <div>Y Max Level: <span>{{debugInfo.yMaxLevel}}</span></div>
      </div>
    </div>
  </template>

  <script type="text/javascript" src="pixi-grid.js"></script>
</dom-module>
